import QtQuick

// 定义折线图组件
Canvas {
    id: gridCanvas
    width: parent.width
    height: parent.height
    property int duration: 16000 //持续时长毫秒

    onPaint: {
        const ctx = getContext("2d");
        ctx.clearRect(0, 0, width, height);
        ctx.strokeStyle = "rgba(255,0,0,1)";
        ctx.lineWidth = 1;
        ctx.beginPath();

        ctx.moveTo(0, 0);
        ctx.lineTo(width, 0);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, height);
        ctx.moveTo(width, 0);
        ctx.lineTo(width, height);
        ctx.moveTo(0, height);
        ctx.lineTo(width, height);

        var gridSize = width / (duration / 1000) / 5
        //纵向大网格
        var step = gridSize
        while (step < width) {
            ctx.moveTo(step, 0);
            ctx.lineTo(step, height);
            step += gridSize
        }
        //横向大网格
        step = gridSize
        while (step < height) {
            ctx.moveTo(0, step);
            ctx.lineTo(width, step);
            step += gridSize
        }

        ctx.strokeStyle = "rgba(255,0,0,0.3)";
        ctx.lineWidth = 0.5
        var smallGridSize = width / (duration / 1000) / 25
        //纵向小网格
        step = smallGridSize
        while (step < width) {
            ctx.moveTo(step, 0);
            ctx.lineTo(step, height);
            step += smallGridSize
        }
        //横向小网格
        step = smallGridSize
        while (step < height) {
            ctx.moveTo(0, step);
            ctx.lineTo(width, step);
            step += smallGridSize
        }

        ctx.stroke();
    }
}
